<template>

    <div>

        <div class="search">

          <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />

        </div>

        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li
                        class="search-item border-bottom"
                        v-for="item of list"
                        :key="item.id"
                >
                    {{item.name}}
                </li>
                <li
                        class="search-item border-bottom" v-show="hasNoData"
                >
                    没有您要搜的内容
                </li>
            </ul>
        </div>

    </div>

</template>


<script>
import Bscroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
  name: 'CitySearch',
  props: {
    cities: Object
  },
  data () {
    return {
      keyword: '',
      list: [],
      timer: null
    }
  },
    computed :{
      hasNoData () {
          return !this.list.length
      }
    },
    methods :{
        handleCityClick (city) {
            // this.$store.dispatch('changeCity',city)
            //  this.commit('changeCity',city)
            this.changeCity(city)
        },
        ...mapMutations(['changeCity'])
    },
    watch :{
      keyword () {
          if(this.timer){
              clearTimeout(this.timer)
          }
          //输入框中输入之后再删除输入框后，下面的搜索结果就会清空
          if(!this.keyword){
              this.list=[]
              return
          }

          this.timer=setTimeout(()=>{
            const result=[]
              for (let i in this.cities){
                this.cities[i].forEach((value)=>{
                    if(value.spell.indexOf(this.keyword)>-1||value.name.indexOf(this.keyword)>-1){
                        result.push(value)
                    }
                })
              }
              this.list=result
          },100)
      }
    },
    mounted () {
      this.scroll=new Bscroll(this.$refs.search)
    }
}
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl"
    .search
        height:.72rem
        padding:0 .1rem
        background:$bgColor
        .search-input
            width:100%
            height:.62rem
            line-height:.62rem
            text-align:center
            color:#666
            padding:0 .1rem
            box-sizing:border-box
            border-radius:.06rem
            padding:0 .1rem
            box-sizing:border-box

            box-sizing:border-box
            width:100%
            padding:0 .1rem
    .search-content
         position:absolute
         top:1.58rem
         left:0
         right:0
         bottom:0
         background:green
         z-index:1
         overflow:hidden
         background:#eee
         .search-item
            line-height:.62rem
            padding-left:.2rem
            background:#fff
            color:#666


</style>
